<!-- html -->
<template>
    <h1 class="h1">Hello</h1>
    <hr>
    <h2 class="h2">Vue</h2>
    <span class="span1" @click="option">选项式API</span>
    <span class="span1" @click="combination">组合式API</span>
    <span class="span1" @click="setup">setup</span>
    <span class="span1" @click="ref">ref</span>
    <span class="span1" @click="reactive">reactive</span>
    <span class="span1" @click="computed">computed</span>
    <span class="span1" @click="watch">watch</span>
    <span class="span1" @click="lifecycle">生命周期</span>
    <span class="span1" @click="hooks">自定义hooks</span>
    <span class="span1" @click="readonly">readonly与shallowReadonly</span>
    <span class="span1" @click="toRaw">toRaw</span>
    <span class="span1" @click="asyncLoading">异步加载</span>
    <span class="span1" @click="componentTransmit">组件通信</span>
    <span class="span1" @click="route">路由</span>
    <span class="span1" @click="slot">插槽</span>
    <span class="span1" @click="globalApi">全局API</span>
    <span class="span1" @click="vif">条件渲染</span>
    <span class="span1" @click="vfor">列表渲染</span>
    <span class="span1" @click="input">表单输入绑定</span>
    <br>
    <span class="span1" @click="pinia">pinia</span>
    <hr class="hr1">
    <h2 class="h2">ts</h2>
    <span class="span1" @click="interfacePage">接口与泛型</span>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    //组件名
    name: 'home'
}
</script>

<!-- js或ts -->
<!-- 组合式API -->
<script setup lang="ts">
//引入外部组件中的方法
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function option() {
    router.push({
        path: '/optionHome'
    })
}
function combination() {
    router.push({
        path: '/combinationHome'
    })
}
function setup() {
    router.push({
        path: '/setupHome'
    })
}
function ref() {
    router.push({
        path: '/refHome'
    })
}
function reactive() {
    router.push({
        path: '/reactiveHome'
    })
}
function computed() {
    router.push({
        path: '/computedHome'
    })
}
function watch() {
    router.push({
        path: '/watchHome'
    })
}
function lifecycle() {
    router.push({
        path: '/lifecycleHome'
    })
}
function hooks() {
    router.push({
        path: '/hooksHome'
    })
}
function readonly() {
    router.push({
        path: '/readonlyHome'
    })
}
function toRaw() {
    router.push({
        path: '/toRawHome'
    })
}
function asyncLoading() {
    router.push({
        path: '/asyncLoadingHome'
    })
}
function componentTransmit() {
    router.push({
        path: '/componentTransmitHome'
    })
}
function route() {
    router.push({
        path: '/routeHome'
    })
}
function slot() {
    router.push({
        path: '/slotHome'
    })
}
function globalApi() {
    router.push({
        path: '/globalApiHome'
    })
}
function vif() {
    router.push({
        path: '/vifHome'
    })
}
function vfor() {
    router.push({
        path: '/vforHome'
    })
}
function input() {
    router.push({
        path: '/inputHome'
    })
}

function pinia() {
    router.push({
        path: '/piniaHome'
    })
}

function interfacePage() {
    router.push({
        path: '/interfaceHome'
    })
}
</script>

<!-- 样式 -->
<!-- scoped：局部样式 -->
<style scoped></style>